import React, { Component } from 'react';
import { connect } from 'react-redux';
import { add, del } from "./../action/homeAction";
const list = [{
    id: 0,
    title: 'Egg+React 服务端渲染1',
    summary: '基于Egg + React + Webpack3/Webpack2 服务端渲染同构工程骨架项目',
    hist: 500,
    url: 'https://github.com/hubcarl/egg-react-webpack-boilerplate'
}, {
    id: 0,
    title: 'Egg+React 服务端渲染2',
    summary: '前端工程化解决方案easywebpack',
    hist: 550,
    url: 'https://github.com/hubcarl/easywebpack'
}, {
    id: 0,
    title: 'Egg+React 服务端渲染3',
    summary: '前端工程化解决方案脚手架easywebpack-cli',
    hist: 278,
    url: 'https://github.com/hubcarl/easywebpack-cli'
}]
class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isReRender: false
        }
        this.data = {
            number: 0,
            list: list
        }
    }
    delClick() {
        this.props.del(this.props.addList)
    }
    addClick() {
        let id = this.data.number++
        if (list.length > id) {
            this.props.add(this.data.list,id)
        } else {
            this.data.number = 0
        }

    }
    render() {
        let { add, del, list } = this.props
        console.log(this.props.addList);
        return <div>
            <h3>SPA Server Side</h3>
            <button style={{ width: '200px' }} onClick={this.addClick.bind(this)}>add</button>
            <div>
                <ul>
                    {this.props.addList.map((val,index)=>{
                        return <li key={index}>
                                <h2>{val.title}</h2>
                                <div>
                                    <ul>
                                    <li>---------{val.hits}</li>
                                        <li> <a>+收藏{val.id}</a></li>
                                        <li>
                                            <span>{val.summary}</span>
                                        </li>
                                        <li>
                                            <button style={{ width: '200px' }} onClick={this.delClick.bind(this)}>delete</button>
                                        </li>
                                        <li>
                                            <button style={{ width: '200px' }} onClick={this.addClick.bind(this)}>add</button>
                                        </li>
                                    </ul>
                                </div>
                        </li>
                    })}
                </ul>
            </div>
        </div>
    }
}
const mapStateToProps = state => {
    console.log('state---:',state.homeReducers.list)
    return {
        addList:state.homeReducers.list
    };
};
Home.defaultProps = {
    list: []
}

export default connect(mapStateToProps, { add, del })(Home);
